$(function () {
  // 定义一个全局对象
  let obj = {
    pagenum: 1,
    pagesize: 2,
    cate_id: '',
    state: ''
  }
  // 使用数据进行构建虚拟DOM树
  function setArtiList(res) {
    let arr = []
    res.data.forEach(ele => {
      arr.push(`
            <tr>
              <td>
                <a data-id="${ele.Id}" class="view" href="javascript:;">${ele.title}</a>
              </td>
              <td>${ele.cate_name}</td>
              <td>${dateTime(ele.pub_date)}</td>
              <td>${ele.state}</td>
              <td>
                <a href="/article/arti_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a>
                <button data-id="${ele.Id}" class="btn-del layui-btn layui-btn-xs layui-btn-danger">删除</button>
              </td>
            </tr>
    `)
    })
    $('tbody').empty().html(arr.join(''))
    /**
     * 分页
     */
    var laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
      elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
      count: res.total,//数据总数，从服务端得到
      limit: obj.pagesize,
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      limits: [2, 5, 10, 15, 20],
      curr: obj.pagenum,
      jump: function (ob, first) {
        //首次不执行
        if (!first) {
          obj.pagesize = ob.limit
          obj.pagenum = ob.curr
          getArtiList1(obj, setArtiList)
        }
      }
    });
  }

  // 
  function setArtibox(res) {
    console.log(res);
    indexEdit = layer.open({
      type: 1,
      title: '编辑类别',
      area: ['900px', '600px'],
      content: `
        <h1>${res.data.title}</h1>
        <div class="text">
          <span>作者：${res.data.author_id}</span>
          <span>发布时间：${dateTime(res.data.pub_date)}</span>
          <span>所属分类：${res.data.cate_id}</span>
          <span>状态：${res.data.state}</span>
        </div>
        <hr>
        <img src="http://api-breakingnews-web.itheima.net${res.data.cover_img}" alt="">
        <p>${res.data.content}</p>
      `
    })
  }
  /**
   * 请求的数据实行渲染
   */
  getArtiList1(obj, setArtiList)
  /**
   * 渲染select
   */
  getArtiList()

  /**
   * 筛选
   */
  $('form').on('submit', function (e) {
    e.preventDefault()
    obj.cate_id = $('[name=cate_id]').val()
    obj.state = $('[name=text]').val()
    getArtiList1(obj, setArtiList)
  })

  /**
   * 删除
   */
  $('tbody').on('click', '.btn-del', function () {
    let id = $(this).attr('data-id')
    layer.confirm('是否确认删除文章?', { icon: 3, title: '提示' }, function (index) {
      //do something
      axios({
        url: '/my/article/delete/' + id
      }).then(({ data: res }) => {
        //成功回调
        if (res.status != 0) {
          return layui.layer.msg(res.message)
        }
        layui.layer.msg('恭喜您， 删除文章成功！')
        getArtiList1(obj, setArtiList)
      }).catch(() => {
        layui.layer.msg('页面错误，请联系管理员')
      })
      layer.close(index);
    })
  })

  /**
   * 查看
   */
  $('tbody').on('click', '.view', function () {
    let id = $(this).attr('data-id')
    getDetails(id, setArtibox)

  })

})
